JS - element properties - clientTop

revision:

returns the width of the top border of an element.

top

It returns the width of the top border of an element, in pixels. It does not include the element's top padding or top margin. The property is read-only.

Syntax:

element.clientTop : the width of an element's top border, in pixels.

property value:

:

example

Display the width of DIV's top and left border:

code: 
                <div>
                    <p>Display the width of DIV's top and left border:</p>
                    <div id=DIV>
                        <p id="prop"></p>
                    </div>
                </div>
                <style>
                    #DIV {height: 250px; width: 400px; padding: 10px; margin: 15px; border-top: 15px solid black; border-left: 10px solid red;  background-color: lightblue;}
                </style>
                <script>
                    const element = document.getElementById("DIV");
                    let text = "clientTop: " + element.clientTop + "px<br>";
                    text += "clientLeft: " + element.clientLeft + "px";
                    document.getElementById("prop").innerHTML = text;
                </script>